<template>
  <div class="message page-wrap">
    <div class="message-nav fz-16 c9 border-box p-l-15 p-r-15">
      <div
          v-for="(tab,idx) in tabs"
          :key="idx"
          :class="{selected:selectIndex==idx}"
          @click="changeIndex(idx)"
          class="message-nav__item h-full flex flex-vertical-c flex-justify-c">
        {{ tab.label }}
      </div>

    </div>

    <div class="message-item" v-for="(item,idx) in list" @click="toHandle(item)">
      <div class="border-box p-l-10 p-r-10 flex flex-justify-between flex-vertical-c bor-b w-full" style="height: 86rpx;">
        <div class="fz-15 c3 fz-b">{{ item.title }}</div>
        <div class="fz-12 c9">{{ item.create_at }}</div>
      </div>
      <div class="w-full p-10 border-box  fz-13 c7 lh24">
        <div>
          {{ item.txt }}
        </div>
        <div class="p-t-10 text-right" v-if="item.handle_path && !item.is_read">
          <button size="mini" class="fun-primary-btn">处理通知</button>
        </div>
      </div>
    </div>

    <layout-empty v-if="loadReady && list.length<1"></layout-empty>

  </div>
</template>

<script>
import { pageMixin } from '@/mixins'
import { information } from '@/api'
import Storage from '@/common/Storage'
import { linkToEasy, showLoading, hideLoading } from '@/common/fun'
import LayoutEmpty from '@/components/layout-empty/layout-empty'

export default {
  mixins: [pageMixin],
  components: {
    LayoutEmpty
  },
  data () {
    return {
      loadReady: false,
      selectIndex: 0,
      list: [],
      tabs: [
        {
          label: '全部',
          type: ''
        },
        {
          label: '任务相关',
          type: 1
        },
        {
          label: '提现进度',
          type: 2
        },
        {
          label: '系统消息',
          type: 0
        },
        {
          label: '其他',
          type: 99
        }
      ]
    }
  },
  methods: {
    toHandle (item) {
      Storage.set('temp_msg_id', item.id)
      if (item.handle_path) {
        showLoading()
        // 请求一下
        information({ id: item.id }).then(res => {
          hideLoading()
          linkToEasy(item.handle_path)
        }).catch(err => {
          hideLoading()
        })
      } else {
        linkToEasy('/pages/message/handle')
      }
    },
    getList (tab) {
      tab.disabled = true

      information({
        type: tab.type,
        size: 0
      })
        .then(res => {
          this.loadReady = true
          this.list = res.data
        })
        .catch(res => {
        })
    },
    changeIndex (index) {
      this.selectIndex = index
      this.getList(this.tabs[index])
    }
  },
  onShow () {
    this.changeIndex(this.selectIndex)
  },
  onLoad () {

  }

}
</script>

<style lang="scss" scoped>
.message {
  padding-top: 90rpx;
  width: 750rpx;
  overflow-x: hidden;
  background-color: #f7f7f7;

  &-nav {
    width: 750rpx;
    height: 90rpx;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    background-color: #FFFFFF;
    z-index: 10;
    overflow-x: scroll;
    white-space: nowrap;

    .selected {
      font-weight: bold;
      color: #000000;
      position: relative;

      &::after {
        content: '';
        width: 30rpx;
        height: 8rpx;
        background-color: $fun-primary-color;
        border-radius: 8rpx;
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__item {
      display: inline-block;
      padding: 0 20rpx;
      line-height: 90rpx;
    }
  }

  &-item {
    width: 710rpx;
    border-radius: 10rpx;
    background-color: #FFFFFF;
    margin: 20rpx auto 0rpx;
  }

}
</style>
